{% extends "base.html" %}

{% block title %}超市申请详情 - 妙趣拾光锦盒管理系统{% endblock %}

{% block extra_css %}
<style>
    .map-container {
        height: 300px;
        border-radius: 5px;
        margin-bottom: 15px;
    }
    .detail-item {
        margin-bottom: 15px;
    }
    .detail-label {
        font-weight: 500;
        color: #555;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('supermarket.applications') }}">超市申请管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">申请详情</li>
            </ol>
        </nav>
        
        <div class="d-flex justify-content-between align-items-center">
            <h2 class="mb-0">
                <i class="fas fa-clipboard-check me-2"></i>超市申请详情
                {% if application.status == 'pending' %}
                <span class="badge bg-warning text-dark">待审核</span>
                {% elif application.status == 'approved' %}
                <span class="badge bg-success">已批准</span>
                {% elif application.status == 'rejected' %}
                <span class="badge bg-danger">已拒绝</span>
                {% endif %}
            </h2>
            <a href="{{ url_for('supermarket.applications') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <!-- 超市基本信息 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-store me-2"></i>超市信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 detail-item">
                        <div class="detail-label">超市名称</div>
                        <div>{{ application.name }}</div>
                    </div>
                    <div class="col-md-6 detail-item">
                        <div class="detail-label">营业时间</div>
                        <div>{{ application.business_hours|default('未提供') }}</div>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">详细地址</div>
                    <div>{{ application.address }}</div>
                </div>
                
                {% if application.latitude and application.longitude %}
                <div class="detail-item">
                    <div class="detail-label">地理位置</div>
                    <div>纬度: {{ application.latitude }}，经度: {{ application.longitude }}</div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-label">位置地图</div>
                    <div id="mapContainer" class="map-container"></div>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- 联系信息 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-user me-2"></i>联系信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 detail-item">
                        <div class="detail-label">联系人</div>
                        <div>{{ application.contact_name }}</div>
                    </div>
                    <div class="col-md-6 detail-item">
                        <div class="detail-label">联系电话</div>
                        <div>
                            <a href="tel:{{ application.contact_phone }}">{{ application.contact_phone }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 申请详情 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>申请详情</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 detail-item">
                        <div class="detail-label">申请ID</div>
                        <div>{{ application.id }}</div>
                    </div>
                    <div class="col-md-6 detail-item">
                        <div class="detail-label">申请时间</div>
                        <div>{{ application.apply_time.strftime('%Y-%m-%d %H:%M:%S') }}</div>
                    </div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-label">申请状态</div>
                    <div>
                        {% if application.status == 'pending' %}
                        <span class="badge bg-warning text-dark">待审核</span>
                        {% elif application.status == 'approved' %}
                        <span class="badge bg-success">已批准</span> 
                        于 {{ application.update_time.strftime('%Y-%m-%d %H:%M:%S') }}
                        {% elif application.status == 'rejected' %}
                        <span class="badge bg-danger">已拒绝</span> 
                        于 {{ application.update_time.strftime('%Y-%m-%d %H:%M:%S') }}
                        {% endif %}
                    </div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-label">备注说明</div>
                    <div class="p-3 bg-light rounded">
                        {{ application.remark|default('无备注')|nl2br }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        {% if application.status == 'pending' %}
        <!-- 审核操作 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-tasks me-2"></i>审核操作</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-1"></i> 请仔细审核申请信息后进行操作
                </div>
                
                <form method="post" action="{{ url_for('supermarket.application_detail', app_id=application.id) }}">
                    <input type="hidden" name="action" value="approve">
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="createMarket" name="create_market" value="yes" checked>
                        <label class="form-check-label" for="createMarket">
                            同时创建超市记录
                        </label>
                        <small class="form-text text-muted d-block">
                            将根据申请信息自动创建新的超市记录
                        </small>
                    </div>
                    
                    <button type="submit" class="btn btn-success btn-block w-100 mb-3">
                        <i class="fas fa-check-circle me-1"></i> 批准申请
                    </button>
                </form>
                
                <button type="button" class="btn btn-danger btn-block w-100" data-bs-toggle="modal" data-bs-target="#rejectModal">
                    <i class="fas fa-times-circle me-1"></i> 拒绝申请
                </button>
            </div>
        </div>
        {% else %}
        <!-- 申请状态 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>申请状态</h5>
            </div>
            <div class="card-body">
                <div class="text-center py-3">
                    {% if application.status == 'approved' %}
                    <div class="mb-3">
                        <i class="fas fa-check-circle text-success fa-5x"></i>
                    </div>
                    <h4>已批准</h4>
                    <p class="text-muted">该申请已于 {{ application.update_time.strftime('%Y-%m-%d %H:%M') }} 批准</p>
                    {% elif application.status == 'rejected' %}
                    <div class="mb-3">
                        <i class="fas fa-times-circle text-danger fa-5x"></i>
                    </div>
                    <h4>已拒绝</h4>
                    <p class="text-muted">该申请已于 {{ application.update_time.strftime('%Y-%m-%d %H:%M') }} 拒绝</p>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- 快捷操作 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-phone-alt me-2"></i>快捷操作</h5>
            </div>
            <div class="card-body">
                <a href="tel:{{ application.contact_phone }}" class="btn btn-outline-primary btn-block w-100 mb-2">
                    <i class="fas fa-phone-alt me-1"></i> 拨打联系电话
                </a>
                
                {% if application.latitude and application.longitude %}
                <a href="https://maps.baidu.com/?query={{ application.latitude }},{{ application.longitude }}" target="_blank" class="btn btn-outline-secondary btn-block w-100">
                    <i class="fas fa-map-marked-alt me-1"></i> 在百度地图查看
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 拒绝申请模态框 -->
{% if application.status == 'pending' %}
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rejectModalLabel">拒绝申请</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{{ url_for('supermarket.application_detail', app_id=application.id) }}">
                <div class="modal-body">
                    <input type="hidden" name="action" value="reject">
                    <div class="mb-3">
                        <label for="rejectReason" class="form-label">拒绝理由</label>
                        <textarea class="form-control" id="rejectReason" name="reject_reason" rows="4" required></textarea>
                        <div class="form-text">请填写拒绝理由，该理由将会被记录并可能通知给申请人</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-danger">确认拒绝</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
{% if application.latitude and application.longitude %}
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=b7fb3f07380c4c27224ed3136b63dc04"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化地图
        var map = new AMap.Map('mapContainer', {
            zoom: 15,
            center: [{{ application.longitude }}, {{ application.latitude }}]
        });
        
        // 添加标记
        var marker = new AMap.Marker({
            position: [{{ application.longitude }}, {{ application.latitude }}],
            title: '{{ application.name }}'
        });
        marker.setMap(map);
        
        // 添加信息窗体
        var infoWindow = new AMap.InfoWindow({
            content: '<div style="padding: 10px;"><h5>{{ application.name }}</h5><p>{{ application.address }}</p></div>',
            offset: new AMap.Pixel(0, -30)
        });
        
        // 默认打开信息窗体
        infoWindow.open(map, marker.getPosition());
    });
</script>
{% endif %}
{% endblock %} 